import './App.css';
import React, { Component } from 'react';
import Header from './components/Header';
import List from './components/List';
import Footer from './components/Footer';

import axios from 'axios';

export default class App extends Component {
  // 状态在哪里， 操作状态的方法就在哪里

  // 初始化状态
  state = {
    todos: [
      {id:'001',name:'吃饭',done:true},
      {id:'002',name:'睡觉',done:true},
      {id:'003',name:'打代码',done:false},
      {id:'004',name:'逛街',done:false}
    ]
  }

  // addTodo用于添加一个todo，接收的参数是todo对象
  addTodo = (todoObj) => {
    // 获取原todos
    const  { todos } = this.state;
    // 追加一个todo
    const newTodos = [todoObj, ...todos];
    // 更新状态
    this.setState({todos: newTodos});
  }

  // updateTodo用于更新一个todo对象
  updateTodo = (id, done) => {
    // 获取状态中的todos
    const  { todos } = this.state;
    // 匹配处理数据
    const newTodos = todos.map((todoObj) => {
      if (todoObj.id === id) return { ...todoObj, done }
      else return todoObj
    })

    // 更新state
    this.setState({todos: newTodos})
  }

  // deleteTodo用于删除一个todo对象
  deleteTodo = (id) => {
    // 获取原来的todos
    const { todos } = this.state;
    // 删除指定id的todo对象
    const newTodos = todos.filter((todoObj) => {
      return todoObj.id !== id
    })

    // 更新状态
    this.setState({todos: newTodos})
  }

  // checkAllTodo用于全选
  checkAllTodo = (done) => {
    // 获取原来的todos
    const { todos } = this.state
    // 加工数据
    const newTodos = todos.map((todoObj) => {
      return {...todoObj, done}
    })
    // 更新状态
    this.setState({todos: newTodos})
  }

  // clearAllDone用于清除所有已完成的
  clearAllDone = () => {
    // 获取原来的todos
    const { todos } = this.state
    // 过滤数据
    const newTodos = todos.filter((todoObj) => {
      return !todoObj.done
    })
    // 更新状态
    this.setState({todos: newTodos})
  }

  
  // 配合node-server.js 调接口得到数据
  getStudentData = () => {
    axios.get('http://localhost:3000/api1/students').then(
      response => {
        console.log('成功了', response.data);
      },
      error => {
        console.log('失败了', error);
      }
    )

    axios.get('http://localhost:3000/api2/cars').then(
      response => {
        console.log('成功了', response.data);
      },
      error => {
        console.log('失败了', error);
      }
    )
  }


  render () {

    // 连续解构赋值
    const obj = {a: {b: {c: 1}}};
    let obj2 = {a:{b:1}};
    // console.log(obj.a.b.c);

    // const { a: {b: {c}}} = obj;
    // console.log(c);

    // 连续解构赋值+重命名
    // const { keywordObj: {value: keyword} } = this;
    // console.log(keyword)  // keyword的值其实就是value，只是value的替代词


    const { todos } = this.state
    return (
      <div className="todo-container">
        <button onClick={this.getStudentData}>点我获取学生数据</button>

        <div className="todo-wrap">
          <Header addTodo={this.addTodo}/>
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
          <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
        </div>
      </div>
    )
  }

}
